<template>
  <el-select
    v-model="value"
    multiple
    clearable
    collapse-tags
    filterable
    :filter-method="jj"
    placeholder="请选择"
    popper-class="custom-header"
    :max-collapse-tags="1"
    @focus="ff"
    style="width: 240px"
  >
    <template #header>
      <el-checkbox
        v-model="checkAll"
        :indeterminate="indeterminate"
        @change="handleCheckAll"
      >
        All
      </el-checkbox>
    </template>
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

import type { CheckboxValueType } from 'element-plus'

const checkAll = ref(false)
const indeterminate = ref(false)
const value = ref<CheckboxValueType[]>([])
const cities = ref([ ])

function gei() {
  cities.value = []
  for (let index = 0; index < 20; index++) {
    cities.value.push({
      value: 'A1-' + (index + 1),
      label: 'A1-' + (index + 1),
    })
  }
}
gei()
function ff() {
  gei()
}
function jj(params: any) {

  cities.value = cities.value.filter((item) => {
    return item.label.indexOf(params) > -1
  })
  // console.log('params', params, cities.value)
  // return ss
}
const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    value.value = cities.value.map((_) => _.value)
  } else {
    value.value = []
  }
}
watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === cities.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

</script>

<style lang="scss">
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}
</style>
